<template>
  <div>
    <div class="title">
      <span>修改密码</span>
    </div>
    <div class="forget">
      <a-form :form="form" @submit="handleSubmit">

        <a-form-item  v-bind="formItemLayout" label="手机号码">
          <a-input v-model="phonenum"

                   style="width: 100%"
          >
            <a-select
                slot="addonBefore"
                v-decorator="['prefix', { initialValue: '86' }]"
                style="width: 70px"
            >
              <a-select-option value="86">
                +86
              </a-select-option>
              <a-select-option value="87">
                +87
              </a-select-option>
            </a-select>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
              v-decorator="[
          'password',
          { rules: [{ required: true, message: '密码不对!' }] },
        ]"
              type="password"
              placeholder="请输入修改后的密码"
          >
            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
          </a-input>
        </a-form-item>
        <a-form-item
            v-bind="formItemLayout"
            label="验证码"
            extra="我们需要确保你是本人!"
        >
          <a-row :gutter="8">
            <a-col :span="12">
              <a-input
                  v-decorator="[
              'captcha',
              { rules: [{ required: true, message: '请输入你获得的验证码!' }] },
            ]"
              />
            </a-col>
            <a-col :span="12" >
              <a-button @click="getnumber">获取验证码</a-button>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item v-bind="tailFormItemLayout">
          <a-button type="primary" html-type="submit">
            修改密码
          </a-button>
          <a-button style="margin-left: 40px">
            <router-link to="/login">返回</router-link>
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { Notify } from 'vant'
import {phone} from "@/api/api";
import {forgetPassword} from "@/api/api";
export default {
  name: "forgetpassword",
  data() {
    return {
      phonenum:'',
      confirmDirty: false,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'register' });
  },
  methods: {
    getnumber(){
      // console.log(this.phonenum)
      phone(this.phonenum).then(res=>{
        console.log(res)
      })
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          forgetPassword(this.phonenum,values.password,this.phonenum,values.captcha).then(res=>{
            console.log(res)
            if(res.code==0){
              Notify({ type: 'success', message: '修改密码成功' });
              setTimeout(()=>{this.$router.push("/login")},1000)
            }else{
              Notify({ type: 'danger', message: '修改失败,请重试' });
            }
          })
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue('password')) {
        callback('Two passwords that you enter is inconsistent!');
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
      }
      callback();
    },

  },
}
</script>

<style scoped lang="less">
.title {
  height: calc(100vh / 5);
  line-height: calc(100vh / 5);
  text-align: center;

  span {
    font-size: 30px;
    color: #51ee0e;
  }
}

.forget {
  width: 80%;
  margin: auto;
}
</style>